<template>
  <div v-loading="currLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-form ref="form" :model="form" label-width="250px" :rules="rules" size="mini">
      <el-form-item label="店铺名称" align="left" prop="name">
        <el-input v-model="form.name" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="店铺联系电话" align="left" prop="mobile">
        <el-input v-model="form.mobile" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="店铺logo(宽高-1:1)" align="left" prop="logo">
        <el-upload
          class="avatar-uploader"
          :headers="getHeader()"
          :action="UploadFileUrl"
          name="myUploadFile"
          :show-file-list="false"
          :on-success="uploadLogoSuccess">
          <img v-if="form.logo" :src="form.logo" class="avatar" style="width:78px">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-input v-model="form.logo" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="店铺banner(宽高-2:1)" align="left" prop="bannerArr">
        <el-upload
          :headers="getHeader()"
          :action="this.UploadFileUrl"
          name="myUploadFile"
          list-type="picture-card"
          :file-list="uploadImageArr"
          :auto-upload="true"
          :disabled="bannerArrDisabled"
          :on-remove="handleMoreUploadRemove"
          :on-success="handleMoreUploadSuccess">
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺定位" align="left" prop="location">
        <el-input v-model="form.location" style="width: 300px"></el-input>
        <label style="color: #d21b1b; font-size: 12px; text-decoration: underline; cursor: pointer" @click="getLocation">获取地址 <i class="el-icon-location"></i></label>
      </el-form-item>
      <el-form-item label="店铺详细地址" align="left" prop="address">
        <span v-if="form.province" v-text="form.province+','+form.city+','+form.county"></span>
        <el-input v-model="form.address" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="店铺营业状态" align="left" prop="businessStatus">
        <el-select v-model="form.businessStatus">
          <el-option v-for="(typeItem,key) in this.shopBusinessStatusArr"
                     :key="key"
                     :label="typeItem.name"
                     :value="typeItem.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="店铺营业时间" align="left" prop="businessTime">
<!--        <el-input v-model="form.businessTime" style="width: 300px"></el-input>-->
        <el-time-select
          style="width: 120px"
          placeholder="起始时间"
          v-model="businessStartTime"
          @change="changeBusinessTime"
          value-format="hh:mm"
          :picker-options="{
      start: '05:30',
      step: '00:15',
      end: '23:45'
    }">
        </el-time-select>
        <el-time-select
          style="width: 120px"
          placeholder="结束时间"
          v-model="businessEndTime"
          @change="changeBusinessTime"
          value-format="hh:mm"
          :picker-options="{
      start: '05:30',
      step: '00:15',
      end: '23:45',
      minTime: businessStartTime
    }">
        </el-time-select>
      </el-form-item>
      <el-form-item label="店铺休息公告" align="left" prop="businessStopInfo">
        <el-input type="textarea" maxlength="100" v-model="form.businessStopInfo" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="配送费" align="left" prop="expressPrice">
        <el-input v-model.number="form.expressPrice" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="满免配送费" align="left" prop="freeExpressPrice">
        <el-input v-model.number="form.freeExpressPrice" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="满减" align="left" prop="fullMinusPrice">
        <el-tag size="small" type="success" v-for="(item,index) in form.fullMinusPrice" :key="index" style="margin: 5px">{{ '满'+item.full+',减'+item.minus }}</el-tag>
        <el-button type="danger" @click="editFullMinus" size="mini">编辑</el-button>
      </el-form-item>
      <el-form-item label="是否同城配送" align="left" prop="isSameCitySend">
        <el-switch v-model="form.isSameCitySend"></el-switch>
      </el-form-item>
      <el-form-item label="启用状态" align="left" prop="status">
        <el-switch v-model="form.status"></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>

    <full-minus-dialog ref="fullMinusDialog" :callback="setFullMinus"/>
  </div>
</template>

<script>
import TableFieldTools from '../Tools/TableFieldTools'
import FullMinusDialog from '../Dialog/FullMinusDialog'

export default {
  name: 'CreateShopPage',
  components: {FullMinusDialog},
  data: function () {
    return {
      info:'店铺-新增',
      bannerLimitNums:dict.ShopBannerNums,
      bannerArrDisabled:false,
      currLoading: false,
      shopBusinessStatusArr: [],
      uploadImageArr:[],
      businessStartTime:'',
      businessEndTime:'',
      form: this.getEmptyForm(),
      rules: {
        name: [
          {required: true, message: '请输入 店铺名称', trigger: ['blur', 'change']},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: ['blur', 'change']}
        ],
        logo: [
          {required: true, message: '请输入 店铺logo', trigger: ['blur', 'change']},
          {min: 30, max: 100, message: '长度在 30 到 100 个字符', trigger: ['blur', 'change']}
        ],
        bannerArr: [
        ],
        location: [
          {required: true, message: '请输入 店铺定位', trigger: ['blur', 'change']},
          {min: 10, max: 30, message: '长度在 10 到 30 个字符', trigger: ['blur', 'change']}
        ],
        mobile: [
          {required: true, message: '请输入 联系电话', trigger: ['blur', 'change']},
          {min: 7, max: 30, message: '长度在 7 到 30 个字符', trigger: ['blur', 'change']}
        ],
        businessStatus: [
          {required: true, message: '请输入 营业状态', trigger: ['blur', 'change']},
        ],
        businessTime: [
          {required: true, message: '请输入 营业时间', trigger: ['blur', 'change']}
        ],
        businessStopInfo: [
          {required: false, message: '请输入 休息公告', trigger: ['blur', 'change']},
          {min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: ['blur', 'change']}
        ],
        address: [
          {required: true, message: '请输入 详细地址', trigger: ['blur', 'change']},
          {min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: ['blur', 'change']}
        ],
      }
    }
  },
  mounted () {
    if (process.env.NODE_ENV === 'development') {
      // this.demoDatail()
    }
    if (this.$route.query.id){
      this.info='店铺-修改'
      this.getDetail()
    }

    this.shopBusinessStatusArr = this.mapToArray(dict.ShopBusinessStatusArr)
    if (this.form.bannerArr && this.form.bannerArr.length > 0) {
      this.uploadImageArr = TableFieldTools.formatImageArr(this.form.bannerArr)
    }

    if (this.$route.query.mapDataString){
      this.parseMyAMap()
    }
  },
  methods: {
    // 解析高德地图参数
    parseMyAMap:function () {
      var tmpAddress = JSON.parse(decodeURI(this.$route.query.mapDataString))
      if (tmpAddress.address){
        // console.log(JSON.stringify(tmpAddress))
        this.form.province=tmpAddress.province
        this.form.city=tmpAddress.city
        this.form.county=tmpAddress.county
        this.form.address=tmpAddress.address
        this.form.cityCode=tmpAddress.cityCode
        this.form.location=tmpAddress.location
        // console.log('tmpAddress',tmpAddress)
      }
    },
    // 例子数据
    demoDatail:function () {
      let $this=this
      $this.form.name='丽丽五金店'
      $this.form.mobile='136666131111'
      var tmpAdd={"location":"108.933304,34.26536","province":"陕西省","city":"西安市","cityCode":"029","county":"莲湖区","address":"北院门街道西仓西巷12号"}
      $this.form.logo='http://image.yangfankj.com/shop/logo/8.jpg'
      $this.form.bannerArr=['http://image.yangfankj.com/shop/logo/8.jpg','http://image.yangfankj.com/shop/logo/9.jpg','http://image.yangfankj.com/shop/logo/9.jpg','http://image.yangfankj.com/shop/logo/9.jpg','http://image.yangfankj.com/shop/logo/9.jpg','http://image.yangfankj.com/shop/logo/9.jpg']
      $this.businessStartTime='09:00'
      $this.businessEndTime='21:00'
      $this.changeBusinessTime()
      $this.form.businessStopInfo='周五休息一天'
      $this.form.isSameCitySend=true
      $this.form.status=true
      $this.form.province=tmpAdd.province
      $this.form.city=tmpAdd.city
      $this.form.county=tmpAdd.county
      $this.form.address=tmpAdd.address
      $this.form.cityCode=tmpAdd.cityCode
      $this.form.location=tmpAdd.location
      if ($this.form.bannerArr.length>=this.bannerLimitNums){
        $this.bannerArrDisabled=true
      }
    },
    // 获取详情
    getDetail:function () {
      var shop=JSON.parse(localStorage.getItem("editShopDetail"))
      shop.status=shop.status.id
      shop.businessStatus=shop.businessStatus.id
      shop.isSameCitySend=shop.isSameCitySend===1?true:false
      shop.status=shop.status===1?true:false
      this.businessStartTime=shop.businessTime[0]
      this.businessEndTime=shop.businessTime[1]
      shop.businessTime=shop.businessTime
      shop.location=shop.location.join(',')
      this.form=shop
      this.$forceUpdate()

/*       let $this=this
      $this.MyRequest(this.ApiDoNameSystem+'Shop/getDetail',{id:$this.$route.query.id},function (datas) {

      }) */
    },
    // 营业时间联动更改
    changeBusinessTime:function () {
      if (this.businessStartTime===null || this.businessEndTime===null){
        this.form.businessTime=''
        return;
      }
      if (this.businessStartTime.length>0 && this.businessEndTime.length>0){
        this.form.businessTime=this.businessStartTime+','+this.businessEndTime
      }else{
        this.form.businessTime=''
      }
    },
    setFullMinus:function (fullMinusPriceArr) {
      this.form.fullMinusPrice=fullMinusPriceArr
      this.$forceUpdate()
    },
    editFullMinus:function () {
      this.$refs.fullMinusDialog.open(this.form.fullMinusPrice)
    },
    getLocation:function () {
      localStorage.setItem('MyAMapFromDataString',JSON.stringify({
        name:this.$route.name,
        query:this.$route.query,
      }))
      this.$router.push({
        name:'MyAMap',
        query:{
          location:this.form.location?this.form.location:'',
          province:this.form.province?this.form.province:'',
          city:this.form.city?this.form.city:'',
          county:this.form.county?this.form.county:'',
          address:this.form.address?this.form.address:'',
        }
      })
    },
    handleMoreUploadRemove: function (file, fileList) {
      var formImageArr = []
      fileList.forEach(function (value, index) {
        formImageArr.push(value.url)
      })
      this.form.bannerArr = formImageArr
      if (this.form.bannerArr.length>=this.bannerLimitNums){
        this.bannerArrDisabled=true
      }else{
        this.bannerArrDisabled=false
      }
    },
    handleMoreUploadSuccess: function (res) {
      // console.log('res',res)
      this.form.bannerArr.push(res.data)
      if (this.form.bannerArr.length>=this.bannerLimitNums){
        this.bannerArrDisabled=true
      }else{
        this.bannerArrDisabled=false
      }
      // this.uploadImageArr=TableFieldTools.formatImageArr(this.form.imageArr)
      // console.log('this.bannerArr', this.form.bannerArr)
    },
    uploadLogoSuccess:function (res) {
      this.form.logo=res.data
    },
    getEmptyForm:function () {
      return Object.assign({},{
        id: 0,
        name: '',
        mobile: '',
        logo: '',
        bannerArr: [],
        province:'',
        city:'',
        cityCode:'',
        county:'',
        location: '',
        address: '',
        businessTime: [],
        businessStatus: '1',
        businessStopInfo: '',
        expressPrice: 20,
        freeExpressPrice: 100,
        fullMinusPrice: [],
        isSameCitySend:false,
        status: true,
      })
    },
    submit: function () {
      let $this = this
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var api = 'Shop/create'
          var form = Object.assign({}, $this.form)
          if ($this.form.id > 0) {
            api = 'Shop/update'
          }
          form.bannerArr=form.bannerArr.join(',')
          form.fullMinusPrice=JSON.stringify(form.fullMinusPrice?form.fullMinusPrice:[])
          form.status=form.status?1:0
          form.isSameCitySend=form.isSameCitySend?1:0
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameSystem + api, form, function () {
            $this.$message.success($this.info + '成功')
            $this.currLoading = false
            $this.$router.push("ShopPage")
            $this.$forceUpdate()
          }, function () {
            $this.$message.success('操作失败请重试')
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
